<!-- src/components/user/EditDialog.vue -->
<template>
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="400px"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <template v-if="type === 'username'">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
        </template>
  
        <template v-if="type === 'email'">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>
        </template>
  
        <template v-if="type === 'password'">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input 
              v-model="form.oldPassword" 
              type="password" 
              show-password 
            />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input 
              v-model="form.newPassword" 
              type="password" 
              show-password 
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input 
              v-model="form.confirmPassword" 
              type="password" 
              show-password 
            />
          </el-form-item>
        </template>
      </el-form>
  
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, computed, reactive, watch } from 'vue'
  import { useUserForm } from './composables/useUserForm'
  
  const props = defineProps({
    visible: Boolean,
    type: String,
    userInfo: Object
  })
  
  const emit = defineEmits(['update:visible', 'submit'])
  
  const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
  })

  const formRef = ref(null)
  const form = reactive({
  username: '',
  email: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const { editRules } = useUserForm(form) 
  
  const rules = computed(() => {
    return props.type === 'password' ? editRules : {
      [props.type]: editRules[props.type]
    }
  })
  
  const dialogTitle = computed(() => {
    const titles = {
      username: '修改用户名',
      email: '修改邮箱',
      password: '修改密码'
    }
    return titles[props.type] || ''
  })
  
  watch(() => props.visible, (val) => {
    if (val && props.type !== 'password') {
      form[props.type] = props.userInfo[props.type]
    }
  })
  
  const handleClose = () => {
    formRef.value?.resetFields()
    dialogVisible.value = false
  }
  

  const handleSubmit = async () => {
    if (!formRef.value) return;
    
    try {
        await formRef.value.validate();
        const submitData = {
            userId: props.userInfo.userId,
            type: props.type  // 添加类型标识
        };
        
        // 根据不同类型构造不同的请求数据
        switch (props.type) {
            case 'username':
                submitData.username = form.username;
                submitData.email = props.userInfo.email;  // 保持其他字段不变
                break;
            case 'email':
                submitData.email = form.email;
                submitData.username = props.userInfo.username;  // 保持其他字段不变
                break;
            case 'password':
                submitData.password = form.newPassword;
                submitData.username = props.userInfo.username;
                submitData.email = props.userInfo.email;
                break;
        }

        emit('submit', submitData);
        dialogVisible.value = false;
    } catch (error) {
        if (error.response?.status === 400) {
            ElMessage.error(error.response.data?.message || '请求参数错误');
        } else {
            ElMessage.error('操作失败，请重试');
        }
        console.error('提交失败:', error);
    }
}
  </script>